<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title><text style="color: #fff">消息通知</text></template>
    </GlobalTopBar>
    <!-- 内容 -->
    <view class="page_content">
      <!-- tabs -->
      <view class="tabs">
        <view
          :class="{ ac: indexs === index }"
          v-for="(item, index) in tabList"
          :key="index + 1"
          @click="indexs = index"
        >
          {{ item.text }}
        </view>
      </view>
      <!-- 列表内容 -->
      <scroll-view
        class="scroll-Y"
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
        @scrolltolower="handleLoadMore"
        refresher-background="#f5f5f5"
        refresher-threshold="80"
      >
        <view
          v-for="(item, index) in listData"
          :key="index + 1"
          class="libox"
          @click="tzFun(item)"
        >
          <view class="t1">{{ item.title || item.content }}</view>
          <view class="t2 flex">
            <image
              class="times_img"
              :src="`${store.imgDomain}order_1.png`"
              mode="scaleToFill"
            />
            <text>{{ item.create_at }}</text></view
          >
        </view>
        <view v-if="!listData.length" class="wjl_box flex_center">
          <image
            class="fp_img"
            :src="`${store.imgDomain}wtz_img.png`"
            mode="widthFix"
          />
          <text>暂无通知</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, watch } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import tabBar from '@/components/tabBar.vue';
import SearchInput from '@/components/SearchInput.vue';

const searchResult = ref('');
const store = useCounterStore();
const userInfo = ref({});
const userAddressList = ref([]);
const isTrue = ref(false);
const isXq = ref(false);
const indexs = ref(0);
// 列表数据相关
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const datas = ref({});
const tabList = [
  {
    text: '平台通知',
    message_type: 0,
  },
  {
    text: '新订单通知',
    message_type: 1,
  },
  {
    text: '订单消息通知',
    message_type: 2,
  },
  {
    text: '评价通知',
    message_type: 3,
  },
];

watch(
  () => indexs.value,
  (val) => {
    getPlatformAnnouncementListForWorker(true);
  },
);
// 获取平台公告列表数据(分页)

const getPlatformAnnouncementListForWorker = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1;
  }
  let url = tabList[indexs.value].message_type
    ? 'worker/index/getSystemMessageListByMessageTypeForWorker'
    : 'worker/index/getPlatformAnnouncementListForWorker';
  try {
    const data = await request(url, {
      message_type: tabList[indexs.value].message_type,
      currpage: pageNum.value,
      pagesize: pageSize.value,
    });
    isNext.value = data.page.isNext;
    if (isRefresh) {
      listData.value = [...data.list];
    } else {
      listData.value = [...listData.value, ...data.list];
    }
  } finally {
    isRefreshing.value = false;
    isLoading.value = false;
  }
};

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getPlatformAnnouncementListForWorker(true);
};

// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getPlatformAnnouncementListForWorker();
};
const tzFun = (item) => {
  if (indexs.value) return;
  store.messageData = { ...item };
  store.to('/pages/master/home/messageNotice');
};

onShow(() => {
  getPlatformAnnouncementListForWorker(true);
});
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #f8f8f8;
}
.topbars {
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
}
.scroll-Y {
  max-height: 80vh;
}
.tops {
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  font-size: 24rpx;
  margin-bottom: 15rpx;
  view {
    position: relative;
    width: max-content;
    &.ac {
      color: #16baaa;
      &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 3rpx;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        background-color: #16baaa;
      }
    }
  }
}
.scroll-Y {
  position: relative;
  height: 80vh;
}
.libox {
  border-radius: 20rpx;
  border: 1rpx solid #71cdc4;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  .t1 {
    line-height: 40rpx;
    font-size: 30rpx;
  }
  .t2 {
    margin-top: 10rpx;
    .times_img {
      width: 28rpx;
      height: 29rpx;
      margin-right: 10rpx;
    }
    text {
      color: $uni-text-color-grey;
    }
  }
}

.wjl_box {
  flex-direction: column;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text {
    color: $uni-text-color-grey;
  }
}
.fp_img {
  width: 221rpx;
}
</style>
